<template>
  <div class="query-page">
    <div class="q-header">
      <span>1、请选择下列院校级别（可多选）</span>
      <a href="javascript:;" class="select-all" @click="selAll()">{{selectAll.text}}</a>
    </div>
    <ul class="level-list">
      <li v-for="(item, idx) in levelData" :key="idx" :class="[schoolLevel[idx] == 1 ? 'active': '']" @click="selectLevel(idx)">
        {{item}}
        <img src="@/assets/images/level_student.png" class="level-img">
      </li>
    </ul>

    <div class="btn-next-group">
      <a href="javascript:;" class="btn-next" @click="queryNext()">下一步</a>
    </div>
  </div>
</template>

<script>
import Utils from '@/common/utils.js'
export default {
  data() {
    return {
      levelData: ['双一流建设(院校)', '985院校', '211院校', '公办本科', '独立学院', '民办学校', '中外合作办学', '高职高专'],
      schoolLevel: [0, 0, 0, 0, 0, 0, 0, 0],
      selectAll: {
        text: '全选',
        status: 1
      }
    }
  },
  created() {
    let _level = Utils.session('schoolLevel')
    if (_level) {
      this.schoolLevel = (_level)
    }
  },
  methods: {
    // 全选 or 撤销
    selAll() {
      if (this.selectAll.status === 1) {
        this.selectAll = {
          text: '撤销',
          status: 0
        }
        this.schoolLevel = [1, 1, 1, 1, 1, 1, 1, 1]
      } else {
        this.selectAll = {
          text: '全选',
          status: 1
        }
        this.schoolLevel = [0, 0, 0, 0, 0, 0, 0, 0]
      }
    },
    // 选择某个级别
    selectLevel(idx) {
      let _val = !this.schoolLevel[idx] ? 1 : 0
      this.$set(this.schoolLevel, idx, _val)
    },
    // 下一步
    queryNext() {
      // 循环查找非空
      let _notNullCount = 0
      this.schoolLevel.map((item, idx) => {
        if (item > 0) {
          _notNullCount++
        }
      })
      if (_notNullCount < 1) {
        this.$vux.toast.show({
          text: '至少选择一个院校级别',
          type: 'text',
          width: '80%'
        })
        return
      }
      Utils.session('schoolLevel', this.schoolLevel)
      this.$router.push({ name: 'queryStep2' })
    }
  }
}
</script>

<style lang="scss" scoped>
.level-list {
  width: 6.213333rem /* 233/37.5 */;
  margin: 0.2rem auto;
  li {
    width: 100%;
    background-color: #bebebe;
    border-radius: 0.106667rem;
    padding: 0.266667rem 0.4rem;
    font-size: 14px;
    margin-bottom: 0.4rem /* 15/37.5 */;
    color: #fff;
    position: relative;
    box-shadow: 0px 3px 10px 0px rgba(255, 134, 0, 0.25);
    .level-img {
      position: absolute;
      right: 0.4rem;
      top: 0.293333rem;
      width: 0.533333rem;
      display: none;
    }
    &.active {
      background-color: #ffa440;
      .level-img {
        display: block;
      }
    }
  }
}
</style>
